<template>
  <div class="informationRecordEchawrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap" v-if="$store.state.btnMenuIds.indexOf(54)>-1">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <div style="float: right;margin-right: 10px;">
              <addBtn @getCompanyInfo="getCompanyInfo"></addBtn>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" :style="$store.state.btnMenuIds.indexOf(54)>-1?'top:75px;':'top:0px;'">
        <el-row style="height: 65%;margin-bottom: 10px;">
          <el-col :span="6" class="echartsWrapOne" :xs="24">
            <div class="echartsBarTitle">准入企业备案车辆</div>
            <div id="echart1" style="height: 50%;"></div>
            <div class="echartsBarTitle" style="margin-top: 10px;">企业运维人员总数</div>
            <div style="height: 35%;" id="echart4"></div>
          </el-col>
          <el-col :span="18" style="height: 100%;" :xs="24">
            <div class="echartsWrapTwo">
              <div class="echartsBarTitle">各区企业备案车辆与运维人员统计</div>
              <div id="echart2" style="height: 100%"></div>
            </div>
          </el-col>
        </el-row>
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            tooltip-effect="dark"
            style="width: 100%"
          >

            <el-table-column
              label="企业名称"
              prop="enterpriseName"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="企业简称"
              prop="enterpriseAlias"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="企业编号"
              prop="enterpriseNo"
            >
            </el-table-column>
            <el-table-column
              label="注册地址"
              prop="regAddress"
              min-width="250"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="注册城市"
              prop="regCity"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="150"
              show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="操作" width="160">
              <template slot-scope="scope">
                <el-tooltip :visible-arrow="false" effect="dark" content="编辑" placement="top-start" v-if="$store.state.btnMenuIds.indexOf(310)>-1">
                  <i @click="$refs.editBtn.init(scope.row)" class="iconfont icon-bianji1" style="margin-right: 10px;"></i>
                </el-tooltip>
                <btnDetail :info="scope.row"></btnDetail>
                <addManage :enterpriseNo="scope.row.enterpriseNo"></addManage>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <editBtn ref="editBtn" />
  </div>
</template>

<script>
  import addBtn from './addBtn.vue';
  import editBtn from './editBtn.vue';
  import echarts from 'echarts'
  import addManage from './addManage.vue';
  import btnDetail from './btnDetail.vue';
  export default {
    props: [],
    data(){
      return {
        rows: [],
        echarts_4Data: [],
        multipleSelection: [],
        echarts_1Data:[],
        dispatchLegend: [],
        dispatchData: []
      }
    },
    components: {addBtn, addManage, btnDetail, editBtn},
    created(){
      this.getCompanyInfo()
    },
    mounted(){
      this.getRegisterVehicle()
      this.selectOperationCount()
      this.initDataEcharts()
    },
    methods: {
      echarts_4(serdata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.echarts.init(document.getElementById('echart4'));
        let data = serdata
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (params) {
              const param = params[0];
              const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
              const suffix = '<span style="margin-left:5px;font-size:12px;">人</span>';
              return param.name + "<br />" +
                // marker + "排名：" + (param.dataIndex+1) + "<br />" +
                marker + "数量：" + param.value + suffix;
            }
          },
          grid: {
            top: 10,
            bottom: 10,
            left: 40,
            right: 50
          },
          xAxis: {
            show: false,
            type: "value"
          },
          yAxis: {
            type: "category",
            inverse: true,
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {
              fontSize: 12,
              color: "#3975FE"
            }
          },
          series: [{
            name: "单车企业",
            type: "bar",
            barCategoryGap: "60%",
            label: {
              show: true,
              position: "right",
              fontSize: 12,
              color: "#188df0",
              emphasis: {
                color: "#e6b600"
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#185bff'}
                  ]
                )
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0, 1, 1, 1,
                  [
                    {offset: 0, color: '#b0c2f9'},
                    {offset: 0.7, color: '#e6b600'},
                    {offset: 1, color: '#ceac09'}
                  ]
                )
              }
            }
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        const xData = [];
        const yData = [];
        for (let i in data) {
          xData.push(data[i].value);
          yData.push(data[i].label);
        }
        myChart.setOption({
          yAxis: {
            data: yData
          },
          series: [{
            name: "市价总值排行",
            data: xData
          }]
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      //获取所有信息
      getCompanyInfo(){
        this.axios.post(process.env.API_HOST + `/enterprise/selectEnterpriseList`, {"enterpriseStatus": 0})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.result
              // this.count = result.total;
              this.getCompanies()  //同步单车企业
            }
          })

      },
      getCompanies(){
        this.axios.post(process.env.API_HOST + `/enterprise/selectEnterpriseList`, {
          enterpriseType: '1',
          enterpriseStatus: "0"
        })
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              let companiess = []
              result.result.forEach(item => {
                companiess.push({
                  "enterpriseId": item.enterpriseId,
                  "enterpriseNo": item.enterpriseNo,
                  "enterpriseName": item.enterpriseAlias,
                  "enterpriseAlias": item.enterpriseAlias ? item.enterpriseAlias : item.enterpriseName,
                  count: 0,
                  color: item.color,
                })
              })
              this.$store.commit("getCompanies", companiess)
              localStorage.setItem('getCompanies', JSON.stringify(companiess));
            }
          })

      },
      selectOperationCount(){
        this.axios.post(process.env.API_HOST + `/enterprise/selectOperationCount`, {})
          .then(response => {
            const result = response.data
            let operationArr = []
            if (result.code == 200 && result.result.length > 0) {
              result.result.forEach(item => {
                operationArr.push({
                  label: item.enterpriseName,
                  value: item.operationCount
                })
              })
              //总数
              this.echarts_4(operationArr)
            }
          })
      },
      //获取所有信息
      getRegisterVehicle(){
        //备案
        this.axios.post(process.env.API_HOST + `/enterprise/selectRegisterVehicle`, {})
          .then(response => {
            const result = response.data
            this.echarts_1Data[0] = []
            this.echarts_1Data[1] = []
            if (result.code == 200 && result.result.length > 0) {
              this.sortByKey(result.result, "enterpriseNo").forEach(item => {
                this.echarts_1Data[0].push(item.enterpriseName)
                this.echarts_1Data[1].push({name: item.enterpriseName, value: item.registerVehicleTotal})
              })

              this.echartsVehicle()
            }
          })
        //运维人员调度
        this.axios.post(process.env.API_HOST + `/enterprise/selectRegionRegisterVehicle`, {"regionType": 0})
          .then(response => {
            const result = response.data
            this.dispatchLegend = [[], []]
            this.dispatchData = [[]]

            let arr = [[], []], arr1 = [], arr2 = [], arr3 = [], arr4 = [], operationArr = []
            if (result.code == 200 && result.result.length > 0) {
              this.sortByKey(result.result, "enterpriseNo").forEach((item, key) => {
                operationArr.push({label: item.enterpriseName, value: 0})
                arr[0].push(item.enterpriseName + "备案车辆")
                arr[1].push(item.enterpriseName + "运维人员")
                arr1[key] = []
                arr2[key] = []
                item.regionList.forEach(item1 => {
                  if (key == 0) {
                    this.dispatchLegend[1].push(item1.regionName)
                  }
                  arr1[key].push(item1.registerVehicleCount)
                  arr2[key].push(item1.operationCount)
                })
                arr3[key] = {name: item.enterpriseName + "备案车辆", value: arr1[key]}
                arr4[key] = {name: item.enterpriseName + "运维人员", value: arr2[key]}
              })
              this.dispatchLegend[0] = [].concat.apply([], arr)
              this.dispatchData = [arr3, arr4]
              this.initDataEcharts()
            }
          })
      },
      initDataEcharts(){
        let seriesArr = []
        if (this.dispatchData.length > 0) {
          this.dispatchData.forEach((item, key) => {
            if (key == 0) {
              item.forEach((item1, index) => {
                seriesArr.push({
                  name: item1.name,
                  type: 'bar',
                  color: this.$store.state.colors[index],
                  data: item1.value
                })
              })

            } else {
              item.forEach((item1, index) => {
                seriesArr.push({
                  name: item1.name,
                  smooth: true,
                  type: 'line',
                  symbol: 'circle',
                  symbolSize: 5,
                  // color:colors[index],
                  yAxisIndex: 1,
                  data: item1.value
                })
              })
            }
          })
        }
        var myChart = this.echarts.init(document.getElementById('echart2'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });
        const colors = ["green", "blue", "pink"]
        const option = {
          color: colors,
          /*title: {
           text: "各区企业备案车辆与运维人员统计",
           subtext: '',
           x: 'left',
           textStyle: {
           fontSize: 15,
           fontWeight: 'bolder',
           color: '#3f51b5'          // 主标题文字颜色
           },
           },*/
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          legend: {
            type: 'scroll',
            top: 0,
            data: this.dispatchLegend[0]
          },
          xAxis: [
            {
              type: 'category',
              data: this.dispatchLegend[1],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '备案车辆',
              /*min: 0,
               max: 250,
               interval: 50,*/
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '运维人员',
              splitLine: {show: false},
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: seriesArr
          /*[
           {
           name: '摩拜',
           type: 'bar',
           data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0,]
           },
           {
           name: 'OFO',
           type: 'bar',
           data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8,]
           },
           {
           name: '运维人员',
           type: 'line',
           yAxisIndex: 1,
           data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5,]
           }
           ]*/
        };
        myChart.setOption(option);
      },
      echartsVehicle() {
        //data 为模拟数据
        var data = this.echarts_1Data[1].reverse()
        // let data = this.echarts_1Data
        var myChart = this.echarts.init(document.getElementById('echart1'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });
        var startColor = [
          {color: '#f25b4a', color1: '#ab3a2d', enterpriseName: "摩拜"},
          {color: '#fddf01', color1: '#B99503', enterpriseName: "OFO"},
          {color: '#27A1FF', color1: '#056FBC', enterpriseName: "哈啰"},
          {color: "#9921FF", color1: "#9921FF", enterpriseName: "青桔"}];

        function deepCopy (obj) {
          if (typeof obj !== 'object') {
            return obj;
          }
          var newobj = {};
          for (var attr in obj) {
            newobj[attr] = obj[attr];
          }
          return newobj;
        }

        var xData = [],
          yData = [];
        data.map((a, b) => {
          xData.push(a.name);
          yData.push(a.value);
        });

        var RealData = [];
        var borderData = [];
        data.map((item, index) => {
          var newobj = deepCopy(item);
          var newobj1 = deepCopy(item);
          RealData.push(newobj);
          borderData.push(newobj1);
        });
        RealData.map((item, index) => {
          startColor.forEach(item1 => {
            if (item1.enterpriseName == item.name.toUpperCase()) {
              item.itemStyle = {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: item1.color // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: item1.color // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                }
              }
            }
          })
        });
        borderData.map((item, index) => {
          startColor.forEach(item1 => {
            if (item1.enterpriseName == item.name.toUpperCase()) {
              item.itemStyle = {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: item1.color1 // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: item1.color1 // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                }
              }
            }
          })
        });
        let option = {
          /*title: {
           text: "准入企业备案车辆",
           subtext: '',
           x: 'left',
           textStyle: {
           fontSize: 15,
           fontWeight: 'bolder',
           color: '#3f51b5'          // 主标题文字颜色
           },
           },*/
          tooltip: {
            trigger: 'item',
            // position: ['30%', '50%'],
            confine: true,
            formatter: "{b}: {c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'vertical',
            x: 'left',
            data: this.echarts_1Data[0]
          },
          series: [
            // 主要展示层的
            {
              radius: ['30%', '53%'],
              center: ['50%', '50%'],
              type: 'pie',
              label: {
                normal: {
                  show: true,
                  lineHeight: 15,
                  formatter: '{b|{b}}\n{c}\n{d}%',
                  textStyle: {
                    color: 'gray'
                  },
                  rich: {
                    b: {
                      color: '#3975FE',
                      lineHeight: 18,
                      align: 'center',
                      fontSize: 14
                    },
                  }
                },
                emphasis: {
                  show: true
                },

              },
              labelLine: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              name: "单车数量",
              data: RealData
            },
            // 边框的设置
            {
              radius: ['25%', '30%'],
              center: ['50%', '50%'],
              type: 'pie',
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              animation: false,
              tooltip: {
                show: false
              },
              data: borderData
            }
          ]
        };
        myChart.setOption(option);
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .informationRecordEchawrap
    page()
    .tableContainer
      background-color #EFEEF3 !important
      padding: 0 !important
      .echartsWrapOne
        height: 100%;
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
      .echartsWrapTwo
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        margin-left: 10px;
        height: 100%;
      .echartsBarTitle
        color: #3975FE;
        font-size: 14px;
        text-align: left;
        font-weight: bold;
        margin 5px 0 5px 10px;
      .tableInner
        background-color white
        padding 20px
        border-radius 5px
        box-sizing border-box
        height 33%
        overflow-y auto
        // padding-bottom 600px;
</style>
